<template>
    <div class="wrap">
        <van-notice-bar scrollable color="#1989fa" background="#ecf9ff" left-icon="info-o">
        拍摄身份证照片请避免反光
        </van-notice-bar>
        <van-form @submit="onSubmit">
            <van-field  name="radio" label="是否有身份证">
                <template #input>
                    <van-radio-group  v-model="form.ison" direction="horizontal">
                        <van-radio :name="1">有</van-radio>
                        <van-radio :name="2">无</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field v-if="form.ison==1"  name="uploader" label="身份证正面照">
                <template #input>
                    <van-uploader :max-count="1" :after-read="onRead" v-model="form.uploader" />
                </template>
            </van-field>
            <van-field v-if="form.ison==1" name="uploader" label="身份证反面照">
                <template #input>
                    <van-uploader :max-count="1" :after-read="onReadf" v-model="form.uploader2" />
                </template>
            </van-field>
            <van-field   name="uploader" label="头像上传">
                <template #input>
                    <van-uploader :max-count="1" :after-read="onReadd" v-model="form.uploader1" />
                </template>
            </van-field>
                <van-field
                v-if="form.ison==1"
                    readonly
                    :value="form.name"
                    name="name"
                    label="姓名"
                    placeholder="2222222"
                />
                <van-field
                v-if="form.ison==1"
                    readonly
                    :value="form.sexs"
                    name="sex"
                    label="性别"
                    placeholder="3333"
                />
                <van-field
                v-if="form.ison==1"
                readonly
                name="birth"
                :value="form.birth"
                label="出生时间"
                placeholder="4444"
                />
                <van-field
                v-if="form.ison==1"
                    readonly
                    :value="form.address"
                    name="address"
                    label="住址"
                    placeholder="5555"
                />
                <van-field
                v-if="form.ison==1"
                    readonly
                    :value="form.id_card"
                    placeholder="6666"
                    name="id_card"
                    label="身份证号"
                
                />
                <van-field
                v-if="form.ison==1"
                    readonly
                    :value="form.send_address"
                     placeholder="7777"
                    name="send_address"
                    label="签发机关"
                />
                <van-field
                v-if="form.ison==1"
                readonly
                clickable
                placeholder="8888"
                name="permit_time"
                :value="form.permit_time"
                label="有效期限"
                />

            <!-- 2222222222 -->
                <van-field
                    v-if="form.ison==2"
                    v-model="form.name"
                    name="name"
                    label="姓名"
                    placeholder="请填写姓名"
                />
                <van-field v-if="form.ison==2"  name="sex" label="性别">
                    <template #input>
                        <van-radio-group v-model="form.sex" direction="horizontal">
                            <van-radio :name="1">男</van-radio>
                            <van-radio :name="2">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                v-if="form.ison==2"
                name="birth"
                :value="form.birth"
                label="出生时间"
                placeholder=""
                />
                <van-field
                    v-if="form.ison==2"
                    v-model="form.address"
                    name="address"
                    label="住址"
                    placeholder="请填写住址"
                />
            <!-- 2222222222 -->
           <van-field
                v-model="form.mobile"
                name="mobile"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
            />
             <van-field
                v-model="form.nationality"
                name="nationality"
                label="国籍"
                placeholder="国籍"
                :rules="[{ required: true, message: '请填写国籍' }]"
            />
             <van-field
                v-model="form.permanent_address"
                name="permanent_address"
                label="户籍地址"
                placeholder="户籍地址"
                :rules="[{ required: true, message: '请填写户籍地址' }]"
            />
            <van-field
            readonly
            clickable
            name="picker"
            :value="form.educations"
            label="文化程度"
            placeholder="点击选择"
            :rules="[{ required: true, message: '请选择文化程度' }]"
            @click="jiaoyuPicker = true"
            />
            <van-field
            readonly
            clickable
            name="picker"
            :value="form.marriages"
            label="婚姻状况"
            placeholder="点击选择"
            :rules="[{ required: true, message: '请选择婚姻状况' }]"
            @click="hunPicker = true"
            />
           
            <van-field :rules="[{ required: true, message: '请选择人口类型' }]" name="person_type" label="人口类型">
                <template #input>
                    <van-radio-group v-model="form.person_type" direction="horizontal">
                        <van-radio name="1">常住人口</van-radio>
                        <van-radio name="2">境外人口</van-radio>
                        <van-radio name="3">流动人口</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <van-field
            readonly
            clickable
            name="picker"
            :value="form.outlooks"
            label="政治面貌"
            placeholder="点击选择"
            :rules="[{ required: true, message: '请选择政治面貌' }]"
            @click="mianPicker = true"
            />
            <van-field
            readonly
            clickable
            name="picker"
            :value="form.religious_belies"
            label="宗教信仰"
            :rules="[{ required: true, message: '请选择宗教信仰' }]"
            placeholder="点击选择"
            @click="zongPicker = true"
            />
            <van-field
            readonly
            clickable
            name="picker"
            :value="form.military_services"
            label="兵役情况"
            :rules="[{ required: true, message: '请选择兵役情况' }]"
            placeholder="点击选择"
            @click="binPicker = true"
            />
            <van-field
            readonly
            clickable
            name="picker"
            :value="form.online_houses"
            label="与房主关系"
            :rules="[{ required: true, message: '请选择与房主关系' }]"
            placeholder="点击选择"
            @click="onlinePicker = true"
            />
           
            <van-field
                v-model="form.building"
                name="building"
                label="楼栋号"
                placeholder="楼栋号"
                :rules="[{ required: true, message: '请填写楼栋号' }]"
            />
            <van-field
                v-model="form.unit"
                name="unit"
                label="单元号"
                placeholder="单元号"
                :rules="[{ required: true, message: '请填写单元号' }]"
            />
            <van-field
                v-model="form.floor"
                name="floor"
                label="楼层号"
                placeholder="楼层号"
                :rules="[{ required: true, message: '请填写楼层号' }]"
            />
            <van-field
                v-model="form.house_number"
                name="house_number"
                label="房屋号"
                placeholder="房屋号"
                :rules="[{ required: true, message: '请填写房屋号' }]"
            />
            <van-field
                v-model="form.house_area"
                name="house_area"
                label="房屋面积"
                placeholder="房屋面积"
                :rules="[{ required: true, message: '请填写房屋面积' }]"
            />
           
            <van-field :rules="[{ required: true, message: '请选择房屋属性' }]" name="house_nature" label="房屋属性">
                <template #input>
                    <van-radio-group v-model="form.house_nature" direction="horizontal">
                        <van-radio name="1">自住</van-radio>
                        <van-radio name="2">出租</van-radio>
                        <van-radio name="3">空置</van-radio>
                        <van-radio name="4">其他</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            
             <van-field
            readonly
            clickable
            name="picker"
            :value="form.house_uses"
            label="房屋用途"
            placeholder="点击选择"
            :rules="[{ required: true, message: '请选择房屋用途' }]"
            @click="usePicker = true"
            />
           
            <van-field
            readonly
            clickable
            name="picker"
            :value="form.property_rights"
            label="产权性质"
            :rules="[{ required: true, message: '请选择产权性质' }]"
            placeholder="点击选择"
            @click="rightsPicker = true"
            />
            <van-field
                v-model="form.car_number"
                name="car_number"
                label="车牌号"
                placeholder="车牌号"
                :rules="[{ required: true, message: '请填写车牌号' }]"
            />
             
            <van-field
            readonly
            clickable
            name="picker"
            :value="form.card_types"
            label="号牌类型"
            :rules="[{ required: true, message: '请选择号牌类型' }]"
            placeholder="点击选择"
            @click="ctypePicker = true"
            />
            <van-field
            readonly
            clickable
            name="picker"
            :value="form.card_colors"
            label="号牌颜色"
            :rules="[{ required: true, message: '请选择号牌颜色' }]"
            placeholder="点击选择"
            @click="ccolorPicker = true"
            />
            
            <van-field
            readonly
            clickable
            name="picker"
            :value="form.car_bodys"
            label="车身颜色"
            :rules="[{ required: true, message: '请选择车身颜色' }]"
            placeholder="点击选择"
            @click="bcolorPicker = true"
            />
            <van-field
            
            readonly
            clickable
            name="picker"
            :rules="[{ required: true, message: '请选择车牌类型' }]"
            :value="form.car_brands"
            label="车牌类型"
            placeholder="点击选择"
            @click="brandPicker = true"
            
            />
           
            
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                提交
                </van-button>
            </div>
        </van-form>

        <van-calendar v-model="showCalendar" @confirm="birthConfirm" />
        
        <van-popup v-model="hunPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="huncolumns"
                @confirm="hunConfirm"
                @cancel="hunPicker = false"
            />
        </van-popup>
        <van-popup v-model="jiaoyuPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="jiaoyucolumns"
                @confirm="jiaoyuConfirm"
                @cancel="jiaoyuPicker = false"
            />
        </van-popup>
        <van-popup v-model="mianPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="miancolumns"
                @confirm="mianConfirm"
                @cancel="mianPicker = false"
            />
        </van-popup>
        <van-popup v-model="zongPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="zongcolumns"
                @confirm="zongConfirm"
                @cancel="zongPicker = false"
            />
        </van-popup>
        
        <van-popup v-model="binPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="bincolumns"
                @confirm="binConfirm"
                @cancel="binPicker = false"
            />
        </van-popup>
        
         <van-popup v-model="onlinePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="onlinecolumns"
                @confirm="onlineConfirm"
                @cancel="onlinePicker = false"
            />
        </van-popup>
        <van-popup v-model="usePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="usecolumns"
                @confirm="useConfirm"
                @cancel="usePicker = false"
            />
        </van-popup>
        <van-popup v-model="rightsPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="rightscolumns"
                @confirm="rightsConfirm"
                @cancel="rightsPicker = false"
            />
        </van-popup>
        
        <van-popup v-model="ctypePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="ctypecolumns"
                @confirm="ctypeConfirm"
                @cancel="ctypePicker = false"
            />
        </van-popup>
        <van-popup v-model="ccolorPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="ccolorcolumns"
                @confirm="ccolorConfirm"
                @cancel="ccolorPicker = false"
            />
        </van-popup>

         <van-popup v-model="brandPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="brandcolumns"
                @confirm="brandConfirm"
                @cancel="brandPicker = false"
            />
        </van-popup>

         <van-popup v-model="bcolorPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="bcolorcolumns"
                @confirm="bcolorConfirm"
                @cancel="bcolorPicker = false"
            />
        </van-popup>
        
    </div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from './api/login.js'
    export default {
        data: function () {
            return {
                fileList:[],
                fileList1:[],
                fileList2:[],
                brandPicker:false,
                bcolorPicker:false,
                ccolorPicker:false,
                ctypePicker:false,
                rightsPicker:false,
                usePicker:false,
                onlinePicker:false,
                binPicker:false,
                zongPicker:false,
                mianPicker:false,
                bcolorcolumns:[{text:'黄',type:1},
                    {text:'灰',type:2}, 
                    {text:'蓝',type:3}, 
                    {text:'白',type:4}, 
                    {text:'黑',type:5},
                    {text:'其他',type:6},
                    {text:'无',type:7}],
                brandcolumns:[{text:'大型客车',type:1},
                    {text:'中型客车',type:2}, 
                    {text:'小型客车',type:3}, 
                    {text:'重型货车',type:4}, 
                    {text:'中型货车',type:5},
                    {text:'新建项目',type:6},
                    {text:'无轻型货车',type:7},
                    {text:'其他',type:8},
                    {text:'无',type:9}],
                ccolorcolumns:[{text:'黄',type:1},
                    {text:'蓝',type:2}, 
                    {text:'黑',type:3}, 
                    {text:'白',type:4}, 
                    {text:'绿',type:5},
                    {text:'黄绿',type:6},
                    {text:'无',type:7}],
                ctypecolumns:[{text:'大型汽车号牌',type:1},
                    {text:'挂车号牌',type:2}, 
                    {text:'小型汽车号牌',type:3}, 
                    {text:'使馆汽车号牌',type:4}, 
                    {text:'领馆汽车号牌',type:5},
                    {text:'港澳出入境号牌',type:6},
                    {text:'教练汽车号牌',type:7},
                    {text:'警用汽车号牌',type:8},{text:'普通摩托车号牌',type:9},
                    {text:'轻便摩托车号牌',type:10},
                    {text:'使馆摩托车号牌',type:11},
                    {text:'领馆摩托车号牌',type:12},
                    {text:'教练摩托车号牌',type:13},
                    {text:'警用摩托车号牌',type:14},
                    {text:'低速车号牌',type:15},
                    {text:'临时行驶车号牌',type:16},
                    {text:'临时入境汽车号牌',type:17},
                    {text:'临时入境摩托车号牌',type:18},
                    {text:'拖拉机号牌',type:19},
                    {text:'无',type:20},],
                    
                    
                rightscolumns:[{text:'国有房产',type:1},
                    {text:'集体所有房产',type:2}, 
                    {text:'私有房产',type:3}, 
                    {text:'联营企业房产',type:4}, 
                    {text:'股份制企业房产',type:5},
                    {text:'港、澳、台同胞房产',type:6},
                    {text:'涉外房产',type:7},
                    {text:'其他',type:8}],
                usecolumns:[{text:'综合',type:1},
                    {text:'住宅',type:2}, 
                    {text:'商业',type:3}, 
                    {text:'厂房',type:4}, 
                    {text:'仓库',type:5},
                    {text:'办公',type:6},
                    {text:'临时建筑',type:7},
                    {text:'其他',type:8}],
                onlinecolumns:[{text:'房主',type:1},
                    {text:'配偶',type:2}, 
                    {text:'子',type:3}, 
                    {text:'女',type:4}, 
                    {text:'孙子、孙女....子、外孙女',type:5},
                    {text:'父母',type:6},
                    {text:'祖父母或外祖父母',type:7},
                    {text:'兄、弟、姐、妹',type:8},
                    {text:'租库',type:9},
                    {text:'其他亲属',type:10}],
                bincolumns:[{text:'未服兵役',type:1},
                    {text:'退出兵役',type:2}, 
                    {text:'士兵预备役',type:3}, 
                    {text:'军官预备役',type:4}, 
                    {text:'现服役',type:5},
                    {text:'其他',type:6}],
                zongcolumns:[{text:'佛教',type:1},
                    {text:'无宗教信仰',type:2}, 
                    {text:'喇叭教',type:3}, 
                    {text:'道教',type:4}, 
                    {text:'天主教',type:5},
                    {text:'基督教',type:6},
                    {text:'伊斯兰教',type:7},
                    {text:'东正教',type:8},
                    {text:'其他',type:9}],
                miancolumns:[{text:'群众',type:1},
                    {text:'中国共产党党员',type:2}, 
                    {text:'中国共产党预备党员',type:3}, 
                    {text:'中国共产主义青年团团员',type:4}, 
                    {text:'中国国民党革命委员会会员',type:5},
                    {text:'中国民主同盟盟员',type:6},
                    {text:'中国民族建国会会员',type:7},
                    {text:'中国民主促进会会员',type:8},
                    {text:'中国农工民主党党员',type:9}],
                jiaoyucolumns:[
                    {text:'小学毕业',type:1},
                    {text:'初中毕业',type:2}, 
                    {text:'高中毕业',type:3}, 
                    {text:'大学专科毕业',type:4}, 
                    {text:'本科毕业',type:5},
                    {text:'中等专科毕业',type:6},
                    {text:'硕士研究生毕业',type:7},
                    {text:'博士毕业',type:8},{text:'其他',type:9}],
                     
                huncolumns:[{text:'未婚',type:1},
                    {text:'已婚',type:2}, 
                    {text:'初婚',type:3}, 
                    {text:'再婚',type:4}, 
                    {text:'复婚',type:5},
                    {text:'丧偶',type:6},
                    {text:'离婚',type:7}],
                hunPicker:false,
                jiaoyuPicker:false,
                showCalendar:false,
                form:{
                    ison:1,
                    permit_time:'',
                    name:'',
                    forward_url:'',
                    send_address:'',
                    village:'',
                    sex: '',
                    mingzu: '',
                    birth: '',
                    address: '',
                    id_card: '',
                    start_time: '',
                    end_time: '',
                    education: '',
                    marriage: '',
                    person_type: '',
                    outlook: '',
                    religious_belie: '',
                    military_service: '',
                    online_house: '',
                    building: '',
                    unit: '',
                    floor: '',
                    house_number: '',
                    house_area: '',
                    house_nature: '',
                    house_use: '',
                    property_right: '',
                    car_number: '',
                    car_color: '',
                    car_type: '',
                    card_color: '',
                    card_type: '',
                    car_brand: '',
                    mobile: '',
                    nationality: '',
                    permanent_address: '',
                    create_time: '',
                    person_url: '',
                    forward_url: '',
                    background_url: '',
                    car_body: ''
                }
            }
        },
        components: {
           
        },
        created(){
            
        },
        mounted() {
           
        },
        methods: {
            onRead: function(file) {
                let that = this;
                Toast.loading({
                    duration:0,
                    message: '上传中...',
                    forbidClick: true,
                });
                let formData = new FormData();
               
               if(file.length){
                    for(let i=0;i<file.length;i++){
                        formData.append('files', file[0].file);
                    }
               }else{
                  formData.append('file', file.file); 
               }
               
                let config = {
                    headers: {
                        Authorization,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
               
                axios.post(zhengmianUrl, formData, config).then(res => {
                   
                    if(res.data.code===100){
                       
                        Toast.clear()
                        if(res.data.result.result.statusCode==400){
                            Notify({ type: 'warning', message: '身份识别不全' });
                        }else{
                            let obj=res.data.result.result
                            that.form.name=obj.name
                            that.form.mingzu=obj.ethnicity
                            that.form.birth=obj.birth
                            that.form.sex=obj.sex=='男'?1:2
                            that.form.sexs=obj.sex
                            that.form.id_card=obj.number
                            that.form.address=obj.address

                            that.form.forward_url=res.data.url
                            Notify({ type: 'success', message: '身份识别正确' });
                        }
                        
                        
                    }else{
                       Notify({ type: 'warning', message: '上传失败' });
                    }
                });
            },
            onReadf: function(file) {
                let that = this;
                Toast.loading({
                    duration:0,
                    message: '上传中...',
                    forbidClick: true,
                });
                let formData = new FormData();
               
               if(file.length){
                    for(let i=0;i<file.length;i++){
                        formData.append('files', file[0].file);
                    }
               }else{
                  formData.append('file', file.file); 
               }
               
                let config = {
                    headers: {
                        Authorization,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
               
                axios.post(fanmianUrl, formData, config).then(res => {
                   
                    if(res.data.code===100){
                       
                        Toast.clear()
                        if(res.data.result.result.statusCode==400){
                            Notify({ type: 'warning', message: '身份识别不全' });
                        }else{
                            let obj=res.data.result.result
                            console.log(obj)
                            that.form.background_url=res.data.url

                            that.form.start_time=obj.valid_from
                            that.form.end_time=obj.valid_to
                            that.form.permit_time=obj.valid_from+'到'+obj.valid_to
                            that.form.send_address=obj.issue
                            Notify({ type: 'success', message: '身份识别正确' });
                        }
                        
                        
                    }else{
                       Notify({ type: 'warning', message: '上传失败' });
                    }
                });
            },
            onReadd: function(file) {
                let that = this;
                Toast.loading({
                    duration:0,
                    message: '上传中...',
                    forbidClick: true,
                });
                let formData = new FormData();
               
               if(file.length){
                    for(let i=0;i<file.length;i++){
                        formData.append('files', file[0].file);
                    }
               }else{
                  formData.append('file', file.file); 
               }
               
                let config = {
                    headers: {
                        Authorization,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
               
                axios.post(datouUrl, formData, config).then(res => {
                   
                    if(res.data.code===100){
                       
                    Toast.clear()
                       Notify({ type: 'success', message: '上传成功' });
                        that.form.person_url=res.data.url
                        
                    }else{
                       Notify({ type: 'warning', message: '上传失败' });
                    }
                });
            },
            brandConfirm(val){
                this.form.car_brand=val.type
                this.form.car_brands=val.text
                this.brandPicker=false
            },
            bcolorConfirm(val){
                this.form.car_body=val.type
                this.form.car_bodys=val.text
                this.bcolorPicker=false
            },
            ccolorConfirm(val){
                
                this.form.card_color=val.type
                this.form.card_colors=val.text
                this.ccolorPicker=false
            },
            ctypeConfirm(val){
                
                this.form.card_type=val.type
                this.form.card_types=val.text
                this.ctypePicker=false
            },
            rightsConfirm(val){
                
                this.form.property_right=val.type
                this.form.property_rights=val.text
                this.rightsPicker=false
            },
            useConfirm(val){
                
                this.form.house_use=val.type
                this.form.house_uses=val.text
                this.usePicker=false
            },
            onlineConfirm(val){
                
                this.form.online_house=val.type
                this.form.online_houses=val.text
                this.onlinePicker=false
            },
            binConfirm(val){
                
                this.form.military_service=val.type
                this.form.military_services=val.text
                this.binPicker=false
            },
            zongConfirm(val){
                
                this.form.religious_belie=val.type
                this.form.religious_belies=val.text
                this.zongPicker=false
            },
            mianConfirm(val){
                this.form.outlook=val.type
                this.form.outlooks=val.text
                this.mianPicker=false
            },
            jiaoyuConfirm(val){
                this.form.education=val.type
                this.form.educations=val.text
                this.jiaoyuPicker=false
            },
            hunConfirm(val){
                this.form.marriage=val.type
                this.form.marriages=val.text
                this.hunPicker=false
            },
            birthConfirm(date) {
                this.form.birth=`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
                this.showCalendar = false;
            },
           onSubmit(val){
               
               if(this.form.name===''){
                   Notify({ type: 'warning', message: '未识别到身份证正面信息' });
                   return
               }
               if(this.form.send_address===''){
                   Notify({ type: 'warning', message: '未识别到身份证反面信息' });
                   return
               }
               if(this.form.person_url===''){
                   Notify({ type: 'warning', message: '请上传个人头像信息' });
                   return
               }
                Dialog.confirm({
                    title: '已确认提交？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    
                    api.add(that.form).then(e=>{
                        if(e.data.code===100){
                            Notify({ type: 'success', message: '录入成功' });
                        }else{
                            Notify({ type: 'danger', message: '系统错误，请联系管理员' });
                        }
                    }).catch(err=>{
                    
                        console.log(err.response)
                    })
                })
                .catch((err) => {
                    console.log(err)
                });
               
           }
        }
    }
</script>

<style scoped lang="scss">
@import "./common.scss";
  

</style>
